<template>
  <el-card shadow="never">
    <div slot="header">
      <div class="block">
        <el-date-picker
          v-model="value2"
          type="year"
          placeholder="请选择年份"
        ></el-date-picker>
        <el-button @click="fetchData">按照年份统计</el-button>
      </div>
    </div>
    <vab-chart
      v-if="resp"
      auto-resize
      theme="vab-echarts-theme"
      :option="option"
    />
    <div v-if="resp" class="bottom">
      <span>
        总{{ title }}:
        <vab-count
          :start-val="config2.startVal"
          :end-val="config2.endVal"
          :duration="config2.duration"
          :separator="config2.separator"
          :prefix="config2.prefix"
          :suffix="config2.suffix"
          :decimals="config2.decimals"
        />
      </span>
    </div>
  </el-card>
</template>

<script>
  import VabChart from '@/plugins/echarts'
  import * as statApi from '@/api/stat'
  import { formatDate } from '/src/utils/formatDateTime'

  export default {
    name: 'StatLineMonth',
    components: {
      VabChart,
    },
    props: {
      deptId: {
        type: String,
        default() {
          return null
        },
      },
      name: {
        type: String,
        default() {
          return 'com.zhongyan.model.Payment'
        },
      },
      title: {
        type: String,
        default() {
          return '支出'
        },
      },
    },
    data() {
      return {
        resp: null,
        value2: null,
        config2: {
          startVal: 0,
          endVal: 0,
          decimals: 0,
          prefix: '￥',
          suffix: '',
          separator: ',',
          duration: 3000,
        },
        option: {
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '4%',
            left: '2%',
            right: '4%',
            bottom: '0%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: [],
              axisTick: {
                alignWithLabel: true,
              },
            },
          ],
          yAxis: [
            {
              type: 'value',
            },
          ],
          series: [
            {
              name: this.title,
              type: 'line',
              barWidth: '60%',
              data: [],
            },
          ],
        },
      }
    },
    watch: {
      deptId() {
        this.fetchData()
      },
    },
    created() {},
    methods: {
      async fetchData() {
        if (!this.value2) {
          return
        }
        const newVar = await statApi.year({
          year: formatDate(this.value2, 'Y'),
          name: this.name,
          deptId: this.deptId,
        })

        this.option.xAxis[0].data = newVar.data.titles
        this.option.series[0].data = newVar.data.datas
        var sum = 0
        for (let datasKey in newVar.data.datas) {
          const datum = newVar.data.datas[datasKey]
          sum += Number.parseFloat(datum)
        }
        this.config2.endVal = sum
        this.resp = newVar
      },
    },
  }
</script>

<style scoped lang="scss">
  ::v-deep {
    .el-alert {
      padding: $base-padding;

      &--info.is-light {
        min-height: 82px;
        padding: $base-padding;
        margin-bottom: 15px;
        color: #909399;
        background-color: $base-color-white;
        border: 1px solid #ebeef5;
      }
    }

    .el-card__body {
      .echarts {
        width: 100%;
        height: 115px;
      }
    }
  }
  .card {
    ::v-deep {
      .el-card__body {
        .echarts {
          width: 100%;
          height: 305px;
        }
      }
    }
  }

  .bottom {
    padding-top: 20px;
    margin-top: 5px;
    color: #595959;
    text-align: left;
    border-top: 1px solid $base-border-color;
  }
</style>
